body,
.main{
	height:100%;
	background:#f1f2f3;
}

.main .content-wrap{
	display:block;
	background:#fff;
}

.main .content{
	padding:0 15px;
	text-align:center;
}
.main .content input{
	line-height:35px;
	color:#333;
	width:100%;
	border:1px solid #dcdcdc;
	text-align:center;
	border-radius:5px;
    box-sizing: border-box;
}
.main .content input::-webkit-input-placeholder { /* WebKit browsers */
    color:    #c0c0c0;
}
.main .content input:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
    color:    #c0c0c0;
}
.main .content input::-moz-placeholder { /* Mozilla Firefox 19+ */
    color:    #c0c0c0;
}
.main .content input:-ms-input-placeholder { /* Internet Explorer 10+ */
    color:    #c0c0c0;
}

.main .content button{
	background:#f34545;
	border:0;
	color:#fff;
	font-size:14px;
	width:100%;
	text-align:center;
	line-height:37px;
	border-radius:5px;
	margin-bottom:15px;
}
.main .content .arrow-title{
	background:url(/img/icon_bg_arrwo.png) no-repeat center;
	background-size:100%;
	margin:20px 0 20px;
	font-size:16px;
}
.main .content .share{
	padding:0 0 20px;
}
.main .content .share span{
	flex:1;
	color:#828282;
}
.main .content .share span img{
	width:50px;
	display:block;
	margin:0 auto 10px;
}

.main .content .list-title{
	font-size:14px;
	color:#828282;
	line-height:40px;
	margin:0 -15px;
	padding:0 25px;
	text-align:left;
	background:#f1f2f3;
	position:relative;
}
.main .content .list-title:before{
	content:"";
	width:3px;
	position:absolute;
	top:13px;
	bottom:13px;
	background:#f34545;
	left:15px;
}
.main .content p.flex-layout{
	padding:0 0 15px;
}
.main .content .friend-list{
	padding:15px 0 0;
}
.main .content div.flex-layout{
	padding:0 0 15px;
}
.main .content .flex-layout p{
	flex:1;
}
.main .content .flex-layout p span{
	display:block;
	text-overflow: ellipsis; white-space: nowrap; overflow:hidden;
}
.main .content .flex-layout p.leftarea{
	max-width:60px;
	text-align:left;
}
.main .content .flex-layout p.centerarea{
	text-align:left;
	text-overflow: ellipsis; white-space: nowrap; overflow:hidden;
}
.main .content .flex-layout p.centerarea span{
	padding-right:10px;
}
.main .content .flex-layout p.rightarea{
	max-width:85px;
	text-align:center;
	background:#f34545;
	color:#fff;
	border-radius:5px;
	line-height:30px;
	font-size:14px;
}
.main .content .flex-layout p.rightarea.noshow{
	background:#dddddd;
}
.main .content .flex-layout img{
	width:50px;
	height:50px;
	border-radius:50%;
}

/* 成为付费会员 */
.main .vip-bg-wrap{
	background:#f1f2f3;
	padding:180px 0 0;
	text-align:center;
	height:100%;
	box-sizing:border-box;
	color:#828282;
	font-size:14px;
}

.main .vip-bg-wrap img{
	width:130px;
	display:block;
	margin:0 auto 30px;
}
.main .vip-bg-wrap button{
	background:#f34545;
	color:#fff;
	border:0;
	border-radius:5px;
	line-height:40px;
	font-size:16px;
	width:80%;
	margin:15px 0 0 ;
}


.list div{
	background:#fff;
}
.list h4 {
	line-height:45px;
	background:#f1f2f3;
	color:#828282;
	padding:0 15px;
	font-weight:300;
}
.list h4 .leftArea span{
	color:#f34545;
	font-weight:500;
}
.list h4 .rightArea{
	color:#333;
	font-size:16px;
}

.list .btn-check{
	display:inline-block !important;
	border:1px solid #cbcbcb;
	border-radius:50%;
	margin-left:10px;
	width:20px;
	height:20px;
	vertical-align: text-bottom;
}
.list .btn-check.check{
	background:url(/img/icon_check.png) no-repeat center;
	background-size:100%;
	border:1px solid #f34545;
}
.list .btn-check input{
	width:20px;
	height:20px;
	opacity:0;
}




.list div.flex-layout{
  padding:15px;
  position:relative;
}
.list div.flex-layout:before{
	content:"";
	width: calc(100% - 15px);
	height:1px;
	background:#f1f1f1;
	position:absolute;
	bottom:0;
	right:0;
}
.list div.flex-layout:last-child:before{
	height:0;
}
.list .flex-layout p{
  flex:1;
}
.list .flex-layout p span{
  display:block;
  text-overflow: ellipsis; white-space: nowrap; overflow:hidden;
}
.list .flex-layout p.leftarea{
  max-width:65px;
  text-align:left;
}
.list .flex-layout p.centerarea{
  text-align:left;
  text-overflow: ellipsis; white-space: nowrap; overflow:hidden;
}
.list .flex-layout p.centerarea span+span{
	color:#828282;
}
.list .flex-layout p.centerarea span{
  padding-right:10px;
}
.list .flex-layout p.rightarea{
  max-width:40px;
  text-align:right;
}
.list .flex-layout img{
  width:50px;
  height:50px;
  border-radius:50%;
}




.popup-list {
	position:fixed;
	top:0;
	left:0;
	right:0;
	bottom:0;
	background:rgba(0,0,0,0.4);
	display:flex;
	display:-webkit-flex;
	align-items:center;
	justify-content: center;
	padding:0 20px;
}
.popup-list > div{
	background:#fff;
	width:100%;
	text-align:center;
	padding:5px 10px;
	border-radius:5px;
	position:relative;
	top:-45px;
}
.popup-list > div h4{
	line-height:40px;
	font-size:16px;
	border-bottom:1px solid #e5e5e5;
}
.popup-list > div p{
	border:1px solid #dcdcdc;
	margin:15px 0 0;
	line-height:40px;
	border-radius:5px;
	color:#828282;
}
.popup-list > div p.active{
	color:#f34545;
	background:url(/img/arrow_check.png) no-repeat right 0 bottom 0  #fef6f6;
	border:1px solid #f34545;
	background-size:30px;

}
.popup-list > div p.no-active{
	background:#efefef;
}

.popup-list button{
	background:#f34545;
	border:0;
	color:#fff;
	font-size:14px;
	width:100%;
	text-align:center;
	line-height:40px;
	border-radius:5px;
	margin:15px 0 15px;
}
.popup-list .close{
	position:absolute;
	border:0;
	text-align:center;
	left:0;
	right:0;
	bottom:-55px;
}
.popup-list .close img{
	width:40px;
}


body,html{
	height:100%;
	background:#fff;
}
button.cs_next{
  background:#f34545;
  border:0;
  color:#fff;
  font-size:14px;
  width:100%;
  text-align:center;
  line-height:40px;
  height:40px;
  position:fixed;
  left:0;
  bottom:-5px;
  right:0;
}



.main .content .btn-frame{
  position:relative;
  margin:15px 0 10px;
  height:35px;
  border:1px solid #dcdcdc;
  border-radius:5px;
  box-sizing:border-box;
  padding:7px 0 0;
}
.main .content .btn-frame span{
  position:absolute;
  left:0;
  top:0;
  line-height:34px;
  width:40px;
  text-align:center;
  color:#333;
}
.main .content input{
  line-height:20px;
  height:20px;
  color:#333;
  width:100%;
  border:1px solid #dcdcdc;
  text-align:left;
  border-radius:5px;
  box-sizing: border-box;
  padding:0 0 0 40px;
  border:0;
  
}
  .popup-country-left > p{
    line-height:43px;
    text-align:center;
    position:relative;
    font-weight:700;
    font-size:15px;
    color:#3e3e3e;
  }
  .popup-country-left ul{
    border-bottom:10px solid #f0eff5;
  }
  .popup-country-left li{
    line-height:35px;
    background:#fff;
    display:flex;
    display:-webkit-flex;
    align-items:center;
    justify-content: center;
    padding:0 15px;
    font-size:14px;
  }
  .popup-country-left li p{
    flex:1;
  }
  .popup-country-left li p{
    text-align:left;
    border-bottom:1px solid #f3f3f3;
    font-size:13px;
  }
  .popup-country-left li p+p{
    text-align:right;
    color:#919095;
  }
  .popup-country-left li:first-child{
    background:#ece6e6;
    color:#656462;
    padding:0 10px;
      justify-content: initial;
      border-bottom:1px solid #e8e5e6;
  }
  .popup-country-left li:last-child p{
    border-bottom:0;
  }
.zanwu{margin:15% auto 0;text-align:center;display:block;padding:0 0 15%;}
.zanwu p{color:#999;margin-top:5px;}
.zanwumore{text-align:center;display:block;padding:15% 0;}
.zanwumore p{color:#999;margin-top:5px;}